import React, { useEffect, useState } from 'react'
import TabBars from '../../components/TabBars'
import {getlistList} from '../../request/api'
import './List.css'
import { InfiniteScroll } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

function List() {
  const navigate=useNavigate()
  const [hasMore, setHasMore] = useState(true)
  const [listdata,setlistdata] = useState<any>()
  useEffect(() => {
    getlistList().then(res => {
      console.log(res);
      setlistdata(res.data.data)
    })
  },[])
   async function loadMore() {
   const append = await getlistList()
   console.log(append);
    setlistdata([...append.data.data])
    setHasMore(true)
   }
   const toParticulars = (idx:any) => {
    navigate('/Particulars/'+idx)
   }
  return (
    <div>
      <div>
        {
          listdata &&
          listdata.map((item:any) => {
            return(
              <div onClick={() => toParticulars(item.id)} key={item.id} className='list_box'>
                <img src={item.imgPath} alt="" /> 
                <div className='list_text'>
                  <p>{item.showDetail}</p>
                  <div className='list_text_price'>
                    <p>{item.showCity}</p>
                    <p className='price'>{item.showPrice}</p>
                  </div>
                  
                </div>
              </div>
            )
          })
        }
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
      <TabBars pathname={'list'}></TabBars>
    </div>
  )
}

export default List
